<script lang='tsx' setup>
import {useRouter} from "vue-router";
import {DICT_TYPE, getDictOptions} from "@/utils/dict";
import ProjectFrom from "@/views/business/project/components/ProjectForm.vue";
import {dateFormatter} from "@/utils/formatTime";
import {useTableColumnStore} from '@/store/modules/tableColumn'
import {useOptionStore} from '@/store/modules/selectOption'
import {storeToRefs} from "pinia";
import * as projectApi from '@/api/business/project'

defineOptions({name: "Project"})
const {t} = useI18n()
const message = useMessage()
const router = useRouter()

const tableColumnStore = useTableColumnStore()
const {project: columns} = storeToRefs(tableColumnStore)
const optionStore = useOptionStore()
const {userOption} = storeToRefs(optionStore)
const directorOption = computed(() => userOption.value.filter(item => !queryParams.value.members.includes(item.value)))
const memberOption = computed(() => userOption.value.filter(item => queryParams.value.director !== item.value))

const showSearch = ref(true)

const queryParams = ref({
  projectName: void 0,//项目名称
  partyA: void 0,//甲方单位
  liaison: void 0,//对接人
  director: void 0,//负责人
  members: [],//成员
  producer: void 0,//制作人
  content: void 0,
  startDate: void 0,
  endDate: void 0,
  submissionDate: void 0,//预估交稿时间
  projectStatus: void 0,//项目进度
  projectLevel: void 0,//项目等级
  taskStatus: void 0,//任务进度
  remake: void 0,//任务进度
  pageNo: 1,
  pageSize: 10,
})
const queryFormRef = useTemplateRef('queryFormRef')
const total = ref(0)
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}

function resetQuery() {
  queryFormRef.value?.resetFields()
  handleQuery()
}


const loading = ref(false)
const checkedIds = ref([])
const list = ref([])

async function getList() {
  try {
    loading.value = true
    const data = await projectApi.getProjectPage(queryParams.value)
    total.value = data.total
    list.value = data.list
  } finally {
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
}

onActivated(() => getList())

function handleRowCheckboxChange(rows: projectApi.ProjectVO[]) {
  checkedIds.value = rows.map((row) => row.id)
}

const handleDelete = async (id?: string) => {
  try {
    if (!id && checkedIds.value.length == 0) return message.warning('请选择项目')
    // 删除的二次确认
    await message.delConfirm()
    let ids
    if (id) {
      ids = [id]
    } else {
      ids = checkedIds.value
    }
    // 发起批量删除
    await projectApi.delProjectList(ids)
    checkedIds.value = []
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch (e) {
    console.log(e, 111111)
  }
}


const projectFromRef = useTemplateRef<typeof ProjectFrom>('projectFromRef')


function openForm(type: string, id?: string) {
  projectFromRef.value?.open(type, id)
}


</script>

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form v-show="showSearch" ref="queryFormRef" :inline="true" :model="queryParams"
             class="-mb-15px" label-width="68px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="queryParams.projectName" class="!w-240px" clearable
                  placeholder="请输入项目名称"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="甲方单位" prop="partyA">
        <el-select v-model="queryParams.partyA" class="!w-240px" clearable filterable
                   placeholder="请选择甲方单位">
          <el-option v-for="item in options" :key="item.value" :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期" prop="startDate">
        <el-date-picker v-model="queryParams.startDate" class="!w-240px" clearable
                        end-placeholder="结束时间"
                        placeholder="开始日期"
                        range-separator="至"
                        start-placeholder="开始时间"
                        type="daterange"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>

      <el-form-item label="结束日期" prop="endDate">
        <el-date-picker v-model="queryParams.endDate" class="!w-240px" clearable
                        end-placeholder="结束时间"
                        placeholder="开始日期"
                        range-separator="至"
                        start-placeholder="开始时间"
                        type="daterange"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item label="负责人" prop="director">
        <el-select v-model="queryParams.director" class="!w-240px" clearable filterable
                   placeholder="请选择负责人">
          <el-option v-for="item in directorOption" :key="item.value" :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="成员" prop="members">
        <el-select v-model="queryParams.members" class="!w-240px" clearable filterable multiple
                   placeholder="请选择成员">
          <el-option v-for="item in memberOption" :key="item.value" :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="项目进度" prop="projectStatus">
        <el-select v-model="queryParams.projectStatus" class="!w-240px" clearable
                   placeholder="请选择项目进度">
          <el-option v-for="item in getDictOptions(DICT_TYPE.BUSINESS_PROJECT_STATUS)"
                     :key="item.value" :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="项目等级" prop="projectLevel">
        <el-select v-model="queryParams.projectLevel" class="!w-240px" clearable
                   placeholder="请选择项目等级">
          <el-option v-for="item in getDictOptions(DICT_TYPE.BUSINESS_PROJECT_LEVEL)"
                     :key="item.value" :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="交稿时间" prop="submissionTime">
        <el-date-picker v-model="queryParams.submissionTime" class="!w-240px" clearable
                        placeholder="交稿时间" type="date"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item>
        <el-button plain type="primary" @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh"/>
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" align="middle" class="mt4 mb4" justify="space-between">
      <el-col :span="5">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button icon="Plus" plain type="primary" @click="openForm('add')">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="Delete" plain type="danger" @click="handleDelete()">删除
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2">
        <right-toolbar v-model:columns="columns" v-model:showSearch="showSearch"
                       @queryTable="handleQuery"></right-toolbar>
      </el-col>
    </el-row>
    <!-- 列表 -->
  </ContentWrap>
  <ContentWrap>
    <el-table v-loading="loading" :data="list" @selection-change="handleRowCheckboxChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column v-if="columns[0].visible" align="center" label="项目名称"
                       prop="projectName"/>
      <el-table-column v-if="columns[0].visible" align="center" label="项目等级"
                       prop="projectLevel"/>
      <el-table-column v-if="columns[1].visible" align="center" label="单位名称" prop="partyA"/>
      <el-table-column v-if="columns[2].visible" align="center" label="甲方对接人" prop="liaison">
      </el-table-column>
      <el-table-column v-if="columns[3].visible" align="center" label="负责人" prop="director"/>
      <el-table-column v-if="columns[4].visible" align="center" label="成员" prop="members"/>
      <el-table-column v-if="columns[5].visible" align="center" label="制作人" prop="producer"/>
      <el-table-column v-if="columns[6].visible" align="center" label="设计内容" prop="content"/>
      <el-table-column
        v-if="columns[7].visible"
        :formatter="dateFormatter"
        align="center"
        label="开始时间"
        prop="startDate" width="180"
      />
      <el-table-column
        v-if="columns[8].visible"
        :formatter="dateFormatter"
        align="center"
        label="结束时间"
        prop="endDate" width="180"
      />
      <el-table-column
        v-if="columns[9].visible"
        :formatter="dateFormatter"
        align="center"
        label="预计交稿时间"
        prop="submissionDate" width="180"
      />
      <el-table-column v-if="columns[10].visible" align="center" label="项目进度"
                       prop="projectStatus"/>
      <el-table-column v-if="columns[11].visible" align="center" label="任务进度"
                       prop="taskStatus"/>
      <el-table-column v-if="columns[12].visible" align="center" label="备注" prop="remark"/>
      <el-table-column align="center" fixed="right" label="操作" min-width="250">
        <template v-slot="{row}">
          <el-button icon="View" link type="primary" @click="openForm('detail',row.id)">详情
          </el-button>
          <el-button icon="Edit" link type="primary" @click="openForm('edit',row.id)"> 编辑
          </el-button>
          <el-button icon="Document" link type="primary"
                     @click="router.push('/business/project-task')">
            任务
          </el-button>
          <el-button icon="List" link type="primary"
                     @click="router.push('/business/project-material')">
            物料清单
          </el-button>
          <el-button icon="Files" link type="primary"
                     @click="router.push('/business/project-file')"> 附件
          </el-button>
          <el-button icon="Delete" link type="primary" @click="handleDelete(row.id)"> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>
  <ProjectFrom ref="projectFromRef" @success="getList"></ProjectFrom>
</template>

<style lang='scss' scoped></style>
